import { View, Image, Text } from '@tarojs/components';
import { AtTag } from 'taro-ui';
import './index.scss';

// const tagList = [
//   {
//     name: '就医陪诊',
//     color: '#F1C247',
//     id: 1,
//   },
//   {
//     name: '个人洗护',
//     color: '#EE687D',
//     id: 2,
//   },
//   {
//     name: '儿童推拿',
//     color: '#72D0A0',
//     id: 3,
//   },
//   {
//     name: '营养三餐',
//     color: '#87C8E9',
//     id: 4,
//   },
//   {
//     name: '室内卫生',
//     color: '#F1C247',
//     id: 5,
//   },
//   {
//     name: '出门陪同',
//     color: '#F480EB',
//     id: 6,
//   },
//   {
//     name: '出门陪同',
//     color: '#EE687D',
//     id: 6,
//   },
// ];

export default function ({ appoint, onHandle = () => {}, index }) {
  console.log('appp', appoint, index);
  // const getTag = () => {
  //   console.log(tagList[index]);
  //   return tagList[index] || {};
  // };
  return (
    <View className="appoint-item" onClick={onHandle}>
      <View className="appoint-info">
        <View className="appoint-image">
          {/* <View className="appoint-tag" style={{ backgroundColor: getTag().color }}>
            {appoint.name}
          </View> */}
          <Image mode="aspectFit" src={appoint.pic_url} />
        </View>
        <View className="appoint-right">
          <View className="appoint-name">{appoint.goods_name}</View>
          <View className="appoint-address">{appoint.brief}</View>
          {/* <View className="appoint-status">
            <Text>{appoint.duration}</Text>
          </View> */}
          <View className="tag-container">
            {appoint.keywords &&
              Array.isArray(appoint.keywords) &&
              appoint.keywords.map((item, key) => {
                return (
                  <AtTag size="small" key={key}>
                    {item}
                  </AtTag>
                );
              })}
          </View>
          <View className="appoint-bottom">
            <Text className="price-text">￥{appoint.min_price}</Text>
            <Text className="price-currency">元起</Text>
            <Text className="sales">{appoint.sales}人已购买</Text>
          </View>
        </View>
      </View>
    </View>
  );
}
